<template>
  <div class="bg-light-400 absolute inset-0">
    <nut-tabs v-model="tabvalue">
      <nut-tab-pane
        class="pane"
        :title="item.tab"
        :auto-height="false"
        v-for="(item, index) in tabList"
        :key="index"
      >
        <div class="h-screen">
          <div
            class="flex justify-between p-2 rounded-md mb-3"
            v-for="(subItem, subIndex) in item.list"
            @click="toPage"
            :key="5"
          >
            <div class="text-ellipsis flex-1 pr-4 text-sm overflow-hidden whitespace-nowrap">
              {{ subItem.title }}
            </div>
            <div class="time text-sm min-w-1/10">{{ subItem.time }}</div>
          </div>
        </div>
      </nut-tab-pane>
    </nut-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const tabvalue = ref(0);
const tabList = ref([
  {
    tab: "行业资讯",
    list: [
      {
        title:
          "考核直线行驶时，考试员会根据道路交通情况，发布“直线行驶”指令，考察考生在驾驶车辆时能否保持车辆直线运动状态",
        time: "2022-01-22",
      },
      {
        title:
          "考核直线行驶时，考试员会根据道路交通情况，发布“直线行驶”指令，考察考生在驾驶车辆时能否保持车辆直线运动状态",
        time: "2022-01-22",
      },
      {
        title:
          "考核直线行驶时，考试员会根据道路交通情况，发布“直线行驶”指令，考察考生在驾驶车辆时能否保持车辆直线运动状态",
        time: "2022-01-22",
      },
    ],
  },
  {
    tab: "法律法规",
    list: [
      {
        title: "申请机动车驾驶证，应当符合国务院公安部门规定的驾驶许可条件",
        time: "2022-01-22",
      },
      {
        title: "申请机动车驾驶证，应当符合国务院公安部门规定的驾驶许可条件",
        time: "2022-01-22",
      },
      {
        title: "申请机动车驾驶证，应当符合国务院公安部门规定的驾驶许可条件",
        time: "2022-01-22",
      },
    ],
  },
]);

const toPage = () => {
  router.push("/publish-detail");
};
</script>